<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            border: 1px solid #000;
        }

        .title {
            background-color: #f00;
        }

    </style>
</head>
<body>

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <!--每个组件都是独立，数据都是自己的-->
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>
    <hr>
    <hr>
    <mycom2></mycom2>

</div>

</body>
<script src="lib/vue.js"></script>

<script type="text/javascript">


    const mycom1 = {
        data() {
            // 组件里面的data要写成一个方法，方法的返回值就是组件的数据
            return {
                title: '我是组件数据'
            }
        },
        created() {
            console.log('created api');
        },
        mounted() {
            console.log('mounted ');
        },
        updated() {
            console.log('updated ');
        },
        methods: {
            clickHandler(event) {
                console.log('clickHandler', event);
                this.title = Math.random();
            }
        },
        template: `
            <div class="container">
                <div class="title">组件结构</div>
                <div style="background-color:gold;">组件结构</div>
                <p>{{ title }}</p>
                <button @click="clickHandler">点击我</button>
            </div>

        `
    }

    const mycom2 = {
        data() {
            // 组件里面的data要写成一个方法，方法的返回值就是组件的数据
            return {
                title: '我是组件2数据'
            }
        },
        created() {
            console.log('created api');
        },
        mounted() {
            console.log('mounted ');
        },
        updated() {
            console.log('updated ');
        },
        methods: {
            clickHandler(event) {
                console.log('clickHandler', event);
                this.title = Math.random();
            }
        },
        template: `
            <div class="container">
                <p>{{ title }}</p>
                <button @click="clickHandler">点击我</button>
            </div>

        `
    }


    new Vue({
        el: '#app',
        data: {
            title: 'vuejs组件化开发！',
        },
        /*复数*/
        components: {
            /*属性组件的名称*/
            /* 如果是写在 new Vue 参数列表 components里面的组件写法，我们叫做组件的注册*/
            mycom1,
            mycom2
        }
    })

</script>

</html>
